<template>
	<view class="content">
		<u-loading-page :loading="loading" bg-color="#e8e8e8" loading-text="loading..."></u-loading-page>
		<view class="host" style="padding-top: 15px;">
			<view class="host_body" v-for="(item,index) in hostList" :key="index">
				<view class="imageing" v-if="item.imgPath.split(',')[0]" @click="previewImage(index)">
					<img style="width: 345rpx;" mode="widthFix" :src="baseUrl+item.imgPath.split(',')[0]">
				</view>
				<view class="host_darkness">
					<u-row class="ty" justify="space-between">
						<u-col span="5" class="yui">
							<p class="yui">{{item.title}}</p>
						</u-col>
						<u-col span="3"  @click="confirmDelete(item.id)">
						  <p class="yui1">删除</p>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<!-- 弹出框 -->
		<view>
			<u-popup :show="show" mode="bottom" @close="close">
				<view class="LoginAlert">
					<p class="AlertText">你未登录，请先登录</p>
					<view class="AlertButton">
						<u-button type="success" text="登录" @click="getEquipment()"></u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
	import request from '@/util/request'
	export default {
		onLoad() {
			this.loading = true
			this.login()
			this.IsLogin();
			
		},
		onShow() {
			this.selectImgListByDevice()
		},
		data() {
			return {
				isLogin: false, //登录状态
				show: false, //控制登录弹出框
				deviceId: 0, //设备id
				baseUrl: this.$baseUrl, //图片请求地址
				loading: false, //加载状态
				hostList: [], //数据
			}
		},
		onReachBottom() {
			// this.loading = true
			setTimeout(() => {
				// 这里放置你想要在等待5秒后执行的代码
				this.loading = false
			}, 1000); 
		},
		computed: {
			divStyle() {
				return {
					color: 'green',
					border: '1px solid red'
				};
			},
		},
		methods: {
			//判断是否登录
			IsLogin() {
				// 获取设备信息
				const systemInfo = uni.getSystemInfoSync();
				let deviceId = systemInfo.deviceId;
				this.deviceId = parseInt(deviceId);
				// 获取登录信息
				const isLogin = uni.getStorageSync('isLogin');
				this.isLogin = isLogin;
			},
			//取消弹出框
			close() {
				this.show = false
			},
			login() {
				wx.login({
					success: res => {
						const code = res.code; //
					}
				})
			},
			//登录
			getEquipment() {
				wx.getUserProfile({
					desc: '获取你的头像和昵称',
					success: (res) => {
						request({
							url: '/users/login',
							method: 'post',
							data: this.deviceId
						}).then(res => {
						}).catch(err => {
						});
						uni.setStorage({
							key: 'isLogin',
							data: true
						})
						uni.setStorage({
							key: 'isUser',
							data: res.userInfo
						})
						uni.reLaunch({
							url: "/pages/my/index"
						})
					},
					fail: (err) => {

					}
				});
			},
			showToast() {
				this.$refs.uToast.show({
					title: '加载数据',
					message: "加载数据",
					type: 'success',
				})
			},
			  // 显示确认删除弹框
			confirmDelete(id) {
			  uni.showModal({
				title: '确认删除',
				content: '您确定要删除该项吗？',
				success: (res) => {
				  if (res.confirm) {
					// 如果点击了确定，执行删除操作
					this.deleteItem(id);
				  } 
				}
			  });
			},
			//删除
			deleteItem(id) {
				this.loading = true;
				request({
					url:"/share/share/deleteById?id=" + id,
					method: 'delete',
				}).then(res =>{
					if(res.code === 200){
						this.selectImgListByDevice()
					    uni.showToast({
							title: '删除成功！',  // 提示的内容
							icon: 'success',      // 图标类型，可选值有 'success', 'loading', 'none'
							duration: 2000        // 提示框显示的时间，单位为毫秒，默认1500
						});
					}else{
						uni.showToast({
						title: '删除失败！',
						icon: 'none',         // 使用 'none' 图标时只是简单的文字提示
						duration: 2000
					    });
					}
					this.loading = false;
				})
			},
			
			// 查询自己（根据设备号进行查询）
			selectImgListByDevice() {
				this.loading = true;
				request({
						url: '/share/share/selectListById',
						method: 'get',
						data: {
							userId: this.deviceId
						} // 将设备号作为查询参数
					})
					.then(response => {
						this.hostList = response.data; // 假设返回的数据存储在 rows 中
						this.loading = false;
					})
					.catch(error => {
						this.loading = false;
					});
			},
			previewImage(index) {
				const imgUrls = this.hostList[index].imgPath.split(",");
				if (imgUrls.length > 0) {
					const newurls = imgUrls.map(item => {
						return item = this.baseUrl + item;
					});
					// 调用预览图片API
					uni.previewImage({
						current: 0, // 当前显示图片索引
						urls: newurls, // 需要预览的图片URL列表
					});
				}
			}
		}
	}
</script>
<style lang="scss">
	.yui1 {
	  color: #ff4d4f;  /* 修改为你想要的字体颜色 */
	  cursor: pointer;  /* 鼠标悬停时显示为点击手形 */
	}
	
	/* 可选：添加点击时的状态变化，例如改变颜色 */
	.yui1:active {
	  color: #d43838;  /* 点击时颜色变为更深的红色 */
	}
	.like {
		color: #ffe833;
		filter: none;
		will-change: font-size;
		-webkit-animation: heart 1s cubic-bezier(0.17，8.89，8.32，1.49);
		animation: heart 1s cubic-bezier(0.17，0.89，8.32，1.49);
		width: 40rpx;
		height: 40rpx;
	}

	.noLike {
		width: 40rpx;
		height: 40rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.host {
		margin-top: 40rpx;
		margin: 0 auto;
		padding: 0 20rpx;
		column-count: 2;
		column-gap: 20rpx;
	}

	.host_body {
		width: 345rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		overflow: hidden;
		background-color: #fff;
		break-inside: avoid;
		/*避免在元素内部插入分页符*/
		box-sizing: border-box;
		/* 	margin-top: rpx; */
		margin-bottom: 20rpx;
		box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
	}

	.imageing {
		width: 345rpx;
		height: auto;
	}

	.types {
		width: 95%;
		margin: 0 auto;
		height: 70rpx;
	}

	.types_son {
		width: 80%;
		margin: 0 auto;
		height: 70rpx;
	}

	.imageing_img {
		width: 345rpx;
		height: auto;
	}

	.host_darkness {
		padding-left: 16rpx;
		font-size: 24rpx;
		margin-top: 15rpx;
		padding-bottom: 22rpx;
	}

	.darkness_silence {
		font-weight: 800;
		margin-top: 12rpx;
		font-size: 27rpx;
		margin-left: 10rpx;
	}

	.yui {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 0px;
	}

	/* 弹出框 */
	.LoginAlert {
		width: 95%;
		height: 200rpx;
		text-align: center;
		font-size: 30rpx;
	}

	/* 弹出框按钮 */
	.AlertButton {
		width: 80%;
		margin: auto;
	}

	/* 弹出框文字 */
	.AlertText {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.query-buttons {
	  margin-top: 20px;
	  display: flex;
	  justify-content: space-around;
	}
</style>